<html>

	<head>
	    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<script type="text/javascript" src="plugin/jquery/jquery-1.5.2.min.js" ></script>
		<script type="text/javascript" src="js/DependencyLoader.js" ></script>
		<style>
			#floor {
				position:absolute;
				overflow: hidden;
				left: 0px;
				top: 0px;
				width:100%;
				height:100%;
				border:red solid thin;
				padding : 0 0 0 0;
				margin  : 0 0 0 0;

			}
			#floor-container {
				/*background-image: url('images/repeating-grid.png');*/
				background-repeat: repeat;
				background-position: -5px 15px;

				width:600px;
				height:600px;

				padding : 0 0 0 0;
				margin  : 0 0 0 0;
			}
			#canvas {
				position: absolute;
				left: 1px;
				top: 10px;
				border : solid thin black;
				z-index:1000;
			}
		</style>

	</head>

	<body>
		<div id="imageBucket" style="display:none;">
		</div>

		<div id="floor-container">
			<div id="floor">
			</div>
		</div>
		<canvas id="canvas"></canvas>

		<div id="scriptBucket">
		</div>

		<script type="text/javascript">
			loadDependencies();
		</script>
		<script type="text/javascript">
				include([
				         'renderers.All'
				         , 'com.unknown.GameWindow'
				         , 'EndlessGrid'
				         , 'InputManager'
				         , 'PathPainter'
				         , 'controller.AnalogStick'],
					function(){
						canvas.height = (window.innerHeight > 600 ? 600 : window.innerHeight - 100);
						canvas.width = (window.innerWidth > 600 ? 600 : window.innerWidth );

						$(floor).css('width', canvas.width);
						$(floor).css('height', canvas.height);

						var gameWindow = null;
						try{
							gameWindow = new com.unknown.GameWindow(canvas, imageBucket, null);

						gameWindow.start();
						var DEGREES_TO_RADIANS = Math.PI / 180.0;
						var DIV_COUNT = 1;

						var FILL = Direction._LAST*2;
						var pathBuilder = new PathBuilder();
						var pathPainter = new PathPainter({pathId:'circle_grass', fill:true, fillOnTop:true});

						var grid = new HexGrid(0,0, 20, 20);
						grid.owner = {
							gridMeta : {
								colCount : 20
								,rowCount: 20
							}
						}
                        var _paint = function(row, col){
                            var cell = grid.childAt(row, col);
                            if( cell ){
                                grid.select(cell);
                                pathPainter.paint(cell);
                            }
                        };

						grid.container = $(floor);
						gameWindow.entities["grid"] = grid;
						gameWindow.renderers["std"] = new StandardRenderer();
                        var circle = [
                                [3,3],
                            [4,2], [4,4],
                           [5,1],   [5,5],
                           [7,1],   [7,5],
                           [9,1],   [9,5],
                            [10,2],[10,4],
                                [11,3]
                        ];

                        iterate(circle, function(coord){
                            _paint(coord[0], coord[1]);
                        });

						var inputManager = new InputManager();
						if( 'createTouch' in document ){
							new TouchInputDevice(inputManager, canvas);
						}else{
							new MouseInputDevice(inputManager);
						}
						new KeyboardInputDevice(inputManager);

						var selectMode = {
							current : null,
							start   : null,
							onMove  : function(e){
								if(e.bId /*&& e.bId.id == 'keyboard'*/){

								}
								if(e.bId && this.current){
									var sX = this.start.x;
									var sY = this.start.y;
									this.current.move(e.x-sX, e.y-sY);
								}
								if( e.bId ){
									grid.hit(e);
									var cell = grid.getCell(e.x, e.y);
									if( cell ){
										grid.select(cell);
										pathPainter.paint(cell);
									}
								}
							},
							onButtonDown : function(e){
								this.start = {x:e.x, y:e.y};

								var cell = grid.getCell(e.x, e.y);
								if( cell ){
									grid.select(cell);
									pathPainter.paint(cell);
								}
							},
							onButtonUp : function(e){
								this.current = null;
							}
						};
						inputManager.addListener('paint', selectMode);
						}catch( ex ) {
							console.error(ex);
						}
					}
				);
		</script>

	</body>
</html>